<template>
  <div class="book_lists">
    <headernav :title="title" />
    <div class="loading" v-if="loading">
      <van-loading size="24px" vertical class="loading"
        >玩命加载中...</van-loading
      >
    </div>
    <!-- 书本 -->
    <router-link
      :to="'/bookdetails?id=' + item.id"
      class="books"
      v-for="item in lists"
      :key="item.id"
      v-show="!loading"
    >
    
      <!-- 图片 -->
      <div class="img">
        <img v-lazy="item.cover" alt="" />
      </div>
      <!-- 文字 -->
      <div class="text">
        <p class="bookname">{{ item.text }}</p>
        <p class="writer">{{ item.author }}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import headernav from "./headernav.vue";
import { getSearchResult } from "../../api/search";
export default {
  name: "booklists",
  components: { headernav },
  data() {
    return {
      lists: [],
      title: "", //标题
      keyword: "", //关键词
      loading: true, //加载中
    };
  },
  methods: {
    // 获取书籍
    getBookLists() {
      getSearchResult({
        search: this.keyword,
      }).then((res) => {
        this.lists = res.words.w;
        this.loading = false;
      });
    },
  },
  created() {
    this.title = this.$route.query.title;
    this.keyword = this.$route.query.key;
    // 开始搜索
    this.getBookLists();
  },
  mounted() {},
};
</script>

<style lang="less">
.book_lists {
  padding-top: 40px;
  .loading {
    position: fixed;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 16%;
    transform: translateY(-50%);
  }
  // 书本
  .books {
    margin-left: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 96px;
    // 最后一本书没有下边框
    .img {
      flex: 0 0 74px;
      height: 96px;
      margin-right: 3.7333%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      flex: 1;
      padding-right: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      p {
        display: flex;
        height: 50%;
        align-items: center;
        font-size: 14px;
        color: #818181;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .writer {
        font-size: 12px;
        color: #8e8e8e;
      }
    }
  }
}
</style>